<template>
	<view class="navigation-page">
		<!-- 地图组件 -->
		<view class="map-container">
			<map id="navigationMap" :latitude="currentLocation.latitude" :longitude="currentLocation.longitude"
				:scale="16" :markers="markers" :polyline="polyline" :show-location="true" :enable-3D="true"
				:enable-zoom="true" :enable-scroll="true" :enable-rotate="false" :enable-overlooking="false"
				@markertap="onMarkerTap" class="map-view">
			</map>
		</view>

		<!-- 底部信息面板 -->
		<view class="bottom-panel">
			<view class="shop-info">
				<text class="shop-name">{{storeInfo.name}}</text>
				<text class="shop-address">{{storeInfo.address}}</text>
			</view>
			<view class="action-buttons">
				<button class="navigation-btn" @click="startNavigation">导 航</button>
				<button class="call-btn" @click="callStore">联系门店</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLocation: {
					latitude: 34.83038,
					longitude: 113.56785
				}, // 默认起点位置
				storeInfo: {
					name: '车百事汽车生活馆',
					address: '山阳区人民路与解放路交叉口',
					phone: '1233211234567',
					targetLocation: {
						latitude: 34.82348,
						longitude: 113.55814
					} // 目标位置
				},
				markers: [],
				polyline: [],
				mapContext: null,
			}
		},
		onLoad(options) {
			// 优先使用传入的起点位置参数，如果没有则使用默认位置
			if (options.startLat && options.startLng) {
				this.currentLocation = {
					latitude: parseFloat(options.startLat),
					longitude: parseFloat(options.startLng)
				};
				console.log('使用传入的起点位置:', this.currentLocation);
			} else {
				// 使用默认起点位置
				console.log('使用默认起点位置:', this.currentLocation);
			}
			this.initMap();
		},
		methods: {
			// 设置起点位置
			setStartLocation(latitude, longitude) {
				this.currentLocation = {
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude)
				};
				console.log('设置起点位置:', this.currentLocation);
				this.setMarkers();
				
				// 移动地图到起点位置
				if (this.mapContext) {
					this.mapContext.moveToLocation({
						latitude: this.currentLocation.latitude,
						longitude: this.currentLocation.longitude
					});
				}
			},
			
			// 初始化地图
			initMap() {
				this.mapContext = uni.createMapContext('navigationMap', this);
				this.setMarkers();
				
				// 确保地图移动到起点位置
				this.$nextTick(() => {
					if (this.mapContext) {
						this.mapContext.moveToLocation({
							latitude: this.currentLocation.latitude,
							longitude: this.currentLocation.longitude
						});
					}
				});
			},

			// 设置地图标记点
			setMarkers() {
				console.log('设置标记点 - 起点位置:', this.currentLocation);
				console.log('设置标记点 - 目标位置:', this.storeInfo.targetLocation);
				
				this.markers = [{
						id: 1,
						latitude: this.currentLocation.latitude,
						longitude: this.currentLocation.longitude,
						title: '我的位置',
						iconPath: '/static/index/定位2.png',
						width: 30,
						height: 30,
						callout: {
							content: '我的位置',
							color: '#333',
							fontSize: 12,
							borderRadius: 5,
							bgColor: '#fff',
							padding: 5,
							display: 'ALWAYS'
						}
					},
					{
						id: 2,
						latitude: this.storeInfo.targetLocation.latitude,
						longitude: this.storeInfo.targetLocation.longitude,
						title: this.storeInfo.name,
						iconPath: '/static/vehicle_repair/storeDetails/banner.png',
						width: 40,
						height: 40,
						callout: {
							content: this.storeInfo.name,
							color: '#333',
							fontSize: 12,
							borderRadius: 5,
							bgColor: '#fff',
							padding: 5,
							display: 'ALWAYS'
						}
					}
				];
				
				console.log('标记点设置完成:', this.markers);
			},


			// 标记点点击事件
			onMarkerTap(e) {
				console.log('标记点点击:', e);
				const markerId = e.detail.markerId;
				if (markerId === 2) {
					// 点击门店标记点，显示门店信息
					uni.showToast({
						title: this.storeInfo.name,
						icon: 'none'
					});
				}
			},



			// 开始导航
			startNavigation() {
				if (!this.currentLocation || !this.storeInfo.targetLocation) {
					uni.showToast({
						title: '位置信息不完整',
						icon: 'none'
					});
					return;
				}
				
				uni.openLocation({
					latitude: this.storeInfo.targetLocation.latitude,
					longitude: this.storeInfo.targetLocation.longitude,
					name: this.storeInfo.name,
					address: this.storeInfo.address
				});
			},

			// 联系门店
			callStore() {
				uni.showModal({
					title: '联系门店',
					content: `是否拨打 ${this.storeInfo.phone}？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title:'成功拨打电话'+this.storeInfo.phone,
								icon:'success'
							}),
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.navigation-page {
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.map-container {
		height: 80vh;
		width: 100%;
		position: relative;
		z-index: 1;
		/* 确保地图可以正常交互 */
		pointer-events: auto;
	}

	.map-view {
		width: 100%;
		height: 100%;
		/* 确保地图组件可以正常交互 */
		pointer-events: auto !important;
		touch-action: pan-x pan-y pinch-zoom !important;
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}


	.bottom-panel {
		height: 20vh;
		background-color: white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.shop-info {
		margin-bottom: 20rpx;
	}

	.shop-name {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.shop-address {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}


	.action-buttons {
		display: flex;
		gap: 15rpx;
	}

	.navigation-btn,
	.call-btn {
		flex: 1;
		height: 80rpx;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.navigation-btn {
		background-color: #007aff;
		color: white;
	}

	.navigation-btn:active {
		background-color: #0056cc;
	}

	.call-btn {
		background-color: #34c759;
		color: white;
	}

	.call-btn:active {
		background-color: #28a745;
	}
</style>